<template>
  <el-dialog title='查看'
             v-if="open"
             :visible.sync="open"
             :modal= true
             append-to-body
             width="95%"
  >
  <div class="app-container">
    <el-form :model="form" size="small" :inline="true" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="询价单编号:" prop="enquiryCode">
            <span>{{ form.enquiryCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="询价单名称:" prop="enquiryName">
            <span>{{ form.enquiryName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据日期:" prop="enquiryDate">
            <span>{{ parseTime(form.enquiryDate, '{y}-{m}-{d}') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="询价截止时间:" prop="enquiryDeadline">
            <span>{{ parseTime(form.enquiryDeadline, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="采购人:" prop="buyer">
            <span>{{ form.buyer }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话:" prop="buyerPhone">
            <span>{{ form.buyerPhone }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货地址:" prop="receivingAddress">
            <span>{{ form.receivingAddress }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-card style="border-radius: 10px">
      <el-tabs>
        <el-tab-pane label="报价单列表">
          <el-table border :data="quotationList" max-height="500">
            <el-table-column label="报价单编号" align="center" prop="quotationCode">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleView(scope.row)"
                >{{ scope.row.quotationCode }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="供应商编码" align="center" prop="vendorCode"/>
            <el-table-column label="供应商名称" align="center" prop="vendorName"/>
            <el-table-column label="报价时间" align="center" prop="quotationTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.quotationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="交货日期" align="center" prop="deliveryDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <span v-if="scope.row.status === '0'">报价中</span>
                <span v-if="scope.row.status === '1'">报价完成</span>
              </template>
            </el-table-column>
            <el-table-column label="代理人" align="center" prop="agentUserName"/>
            <el-table-column label="含税金额" align="center" prop="taxAmount"/>
            <el-table-column label="不含税金额" align="center" prop="noTaxAmount"/>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="比价明细">
          <el-table border :data="contrastList" :span-method="objectSpanMethod" max-height="500">
            <el-table-column label="物料" align="center" width="300">
              <template slot-scope="scope">
                <p>{{scope.row.itemCode}}</p>
                <p>物料名称：{{scope.row.itemName}}</p>
                <p>规格型号：{{scope.row.specification}}</p>
                <p>单位：{{scope.row.unitOfMeasure}}</p>
              </template>
            </el-table-column>
            <el-table-column label="需求数量" align="center" prop="quantity"/>
            <el-table-column label="供应商" align="center" prop="vendorName" width="300"/>
            <el-table-column label="供货数量" align="center" prop="supplyQuantity"/>
            <el-table-column label="中标数量" align="center" prop="calibrateQuantity"width="200"/>
            <el-table-column label="含税单价" align="center" prop="taxPrice"/>
            <el-table-column label="税率" align="center" prop="tax"/>
            <el-table-column label="不含税单价" align="center" prop="noTaxPrice"/>
            <el-table-column label="含税金额" align="center" prop="taxAmount"/>
            <el-table-column label="不含税金额" align="center" prop="noTaxAmount"/>
            <el-table-column label="交货日期" align="center" prop="deliveryDate" width="200">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否中标" align="center" prop="isCalibrateB">
              <template slot-scope="scope">
                <span>{{scope.row.isCalibrateB?'是':'否'}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="定标明细">
          <el-table border :data="calibrationList"  max-height="500">
            <el-table-column label="物料编号" align="center" prop="itemCode"/>
            <el-table-column label="物料名称" align="center" prop="itemName"/>
            <el-table-column label="规格型号" align="center" prop="specification"/>
            <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
            <el-table-column label="需求数量" align="center" prop="quantity"/>
            <el-table-column label="供应商" align="center" prop="vendorName" width="300"/>
            <el-table-column label="供货数量" align="center" prop="supplyQuantity"/>
            <el-table-column label="中标数量" align="center" prop="calibrateQuantity"/>
            <el-table-column label="含税单价" align="center" prop="taxPrice"/>
            <el-table-column label="税率" align="center" prop="tax"/>
            <el-table-column label="不含税单价" align="center" prop="noTaxPrice"/>
            <el-table-column label="含税金额" align="center" prop="taxAmount"/>
            <el-table-column label="不含税金额" align="center" prop="noTaxAmount"/>
            <el-table-column label="交货日期" align="center" prop="deliveryDate" width="200">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
      <el-button type="info" @click="cancel">返 回</el-button>
    </div>
  </div>
    <QuotationInfoView ref="quotationInfoView"></QuotationInfoView>
  </el-dialog>
</template>
<script>
import {getEnquiryInfoVo} from "@/api/mes/cg/enquiry";
import QuotationInfoView from "@/views/mes/cg/quotation/infoView.vue";
export default {
  name: "EnquiryInfoView",
  components: {QuotationInfoView},
  data() {
    return {
      open:false,
      title:null,
      // 遮罩层
      loading: true,
      quotationList:[],
      contrastList:[],
      calibrationList:[],
      // 表单参数
      form: {},
      spanArr:[],
    };
  },
  created() {
  },
  methods: {
    init(id){
      getEnquiryInfoVo(id).then(response => {
        this.form = response.data;
        this.quotationList = response.data.purchaseQuotationList;
        this.contrastList = response.data.purchasePriceContrastList;
        this.calibrationList = response.data.calibrationList;
        this.getSpanArr();
        this.open = true;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    handleView(row){
      this.$refs.quotationInfoView.init(row.id)
    },
    // 合并单元格方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) { // 只在分类列合并
        const rowspan = this.spanArr[rowIndex]
        const colspan = rowspan > 0 ? 1 : 0
        return { rowspan, colspan }
      }
    },
    getSpanArr() {
      // 合并单元格规则计算
      this.spanArr=[];
      let pos=0;
      this.contrastList.forEach((item, index) => {
        if(index===0){
          this.spanArr.push(1)
          pos=0
        }else{
          if(this.contrastList[index].itemId===this.contrastList[index-1].itemId){
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          }else{
            this.spanArr.push(1)
            pos = index
          }
        }
      })
    }
  }
};
</script>
